<template>
  <div class="searchbar">
    <div class="search_barcontainer">
      <div>
        <span> <i class="el-icon-location"></i>热门搜索： </span>
        <span>汽车底盘螺母|高强度底盘螺母</span>
      </div>
      <div>
        <el-input
          placeholder="搜索商品"
          suffix-icon="el-icon-search"
          v-model="input1"
        ></el-input>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      input1: '',
    }
  },
}
</script>

<style lang="less" scoped>
.searchbar {
  margin: 5px 0;
  border-top: 1px solid rgb(205, 205, 205);
  border-bottom: 1px solid rgb(205, 205, 205);
  .search_barcontainer {
    width: 1460px;
    height: 45px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .my-autocomplete {
    li {
      line-height: normal;
      padding: 7px;

      .name {
        text-overflow: ellipsis;
        overflow: hidden;
      }
      .addr {
        font-size: 12px;
        color: #b4b4b4;
      }

      .highlighted .addr {
        color: #ddd;
      }
    }
  }
}
</style>
